import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import EcgModel 1.0
import "utils.js" as Utils

ColumnLayout{
    anchors.fill: parent
    spacing:0
    id:rrIntervalChartCanvas

    signal selectedRangeChange(int start,int duration)
    //图表主体
    Rectangle{
        Layout.fillWidth : true
        Layout.fillHeight:true
        color:"#ffffff"
        RowLayout{
            anchors.fill: parent
            spacing:0
            Rectangle{
                Layout.preferredWidth : 40
                Layout.fillHeight:true
                //刻度线
                Rectangle {
                    width: 1
                    height: parent.height -5
                    color: "#666666"
                    x:parent.width -1
                    y:5
                }
                Repeater {
                    model:  5 // 重复次数
                    Rectangle {
                        width: 6
                        height: 1
                        color: "#666666"
                        y: parent.height - 5 - index*((parent.height - 10) / 4)
                        x: parent.width - width
                    }
                }
                //刻度值
                Repeater {
                    model:  5 // 重复次数
                    Text {
                        text: (2000-index*500).toString()
                        width:  parent.width - 8
                        height: 10
                        font.pixelSize: 10
                        color: "#666666"
                        verticalAlignment: Text.AlignVCenter  // 垂直居中
                        horizontalAlignment: Text.AlignRight  // 水平右对齐
                        y: index*((parent.height-10) / 4)
                        x: 0
                    }
                }
            }
            Rectangle{

                Layout.fillWidth : true
                Layout.fillHeight:true
                // color:"red"

                //图表区域
                Canvas{
                    width: parent.width-15
                    height: parent.height-11
                    x:0
                    y:6
                    onPaint: {
                        // console.log(width,height)
                        var ctx = getContext("2d");
                        // 获取图像数据
                        var imageData = ctx.getImageData(0, 0, width, height);
                        var data = beatsModel.getRrIntervalChartData(0,0,width,height);
                        for (var i = 0; i < data.length; i ++) {
                            imageData.data[i] = data[i];
                        }
                        // 将ImageData绘制到画布上
                        ctx.drawImage(imageData, 0, 0);
                    }
                }
                //框选组件
                MouseArea {
                    id:rrIntervalChartMouseArea
                    width: parent.width-15
                    height: parent.height-11
                    x:0
                    y:6
                    cursorShape: Qt.CrossCursor

                    property real startX: 0
                    property bool selecting: false

                    onPressed: function(mouse)  {
                        startX = mouse.x
                        selecting = true
                        rrIntervalChartSelection.visible = true
                        rrIntervalChartSelection.x = startX
                        rrIntervalChartSelection.width = 0
                    }
                    onPositionChanged:function (mouse) {
                        if (selecting) {
                            var width = mouse.x - startX
                            rrIntervalChartSelection.x = width < 0 ? startX + width : startX
                            rrIntervalChartSelection.width = Math.abs(width)

                            if(rrIntervalChartSelection.x < 0){
                                rrIntervalChartSelection.width += rrIntervalChartSelection.x
                                rrIntervalChartSelection.x = 0
                            }
                            if(rrIntervalChartSelection.x +rrIntervalChartSelection.width > rrIntervalChartMouseArea.width){
                                rrIntervalChartSelection.width =rrIntervalChartMouseArea.width - rrIntervalChartSelection.x
                            }

                        }
                    }
                    onReleased: function (mouse){
                        selecting = false
                        if(rrIntervalChartSelection.width < 10){
                            rrIntervalChartSelection.width = 50
                            rrIntervalChartSelection.x = startX-25
                        }
                        if(rrIntervalChartSelection.x < 0){
                            rrIntervalChartSelection.x = 0
                        }
                        if(rrIntervalChartSelection.x + rrIntervalChartSelection.width > rrIntervalChartMouseArea.width){
                            rrIntervalChartSelection.x = rrIntervalChartMouseArea.width - rrIntervalChartSelection.width
                        }

                        let start = rrIntervalChartSelection.x / rrIntervalChartMouseArea.width * EcgModel.duration / 1000 * EcgModel.sampleRate
                        let duration = rrIntervalChartSelection.width / rrIntervalChartMouseArea.width * EcgModel.duration
                        rrIntervalChartCanvas.selectedRangeChange(start,duration)
                    }
                    //高亮框
                    Rectangle {
                        id: rrIntervalChartSelection
                        height: parent.height
                        width: 0
                        color:  Qt.rgba(0/255, 0/255, 255/255, 60/255)
                        visible: false

                        Rectangle{
                            anchors.fill: parent
                            color:"transparent"
                            //可拖动组件
                            MouseArea {
                                anchors.fill: parent
                                // color:"green"
                                cursorShape: Qt.SizeAllCursor

                                property real startX: 0
                                onPressed: function(mouse)  {
                                    startX = mouse.x
                                }
                                onPositionChanged:function (mouse) {
                                    var width = mouse.x - startX
                                    rrIntervalChartSelection.x = rrIntervalChartSelection.x+width
                                    if(rrIntervalChartSelection.x < 0){
                                        rrIntervalChartSelection.x = 0
                                    }
                                    if(rrIntervalChartSelection.x + rrIntervalChartSelection.width > rrIntervalChartMouseArea.width){
                                        rrIntervalChartSelection.x = rrIntervalChartMouseArea.width - rrIntervalChartSelection.width
                                    }
                                }
                                onReleased: function (mouse){
                                    let start = rrIntervalChartSelection.x / rrIntervalChartMouseArea.width * EcgModel.duration / 1000 * EcgModel.sampleRate
                                    let duration = rrIntervalChartSelection.width / rrIntervalChartMouseArea.width * EcgModel.duration
                                    rrIntervalChartCanvas.selectedRangeChange(start,duration)
                                }
                            }
                            //向左变大
                            MouseArea {
                                anchors.left: parent.left
                                height: parent.height
                                width : 5
                                // color:"Red"
                                cursorShape: Qt.SizeHorCursor

                                property real startX: 0
                                property bool running: false
                                onPressed: function(mouse)  {
                                    startX = mouse.x
                                    running = true
                                }
                                onPositionChanged:function (mouse) {
                                    if(running){
                                        var width = mouse.x - startX
                                        rrIntervalChartSelection.x = rrIntervalChartSelection.x+width
                                        rrIntervalChartSelection.width = rrIntervalChartSelection.width - width
                                        if(rrIntervalChartSelection.x < 0){
                                            rrIntervalChartSelection.width += rrIntervalChartSelection.x
                                            rrIntervalChartSelection.x = 0
                                        }
                                        if(rrIntervalChartSelection.width < 10){
                                            rrIntervalChartSelection.x  -= 10 - rrIntervalChartSelection.width
                                            rrIntervalChartSelection.width = 10
                                        }
                                    }
                                }
                                onReleased: function (mouse){
                                    running = false
                                    let start = rrIntervalChartSelection.x / rrIntervalChartMouseArea.width * EcgModel.duration / 1000 * EcgModel.sampleRate
                                    let duration = rrIntervalChartSelection.width / rrIntervalChartMouseArea.width * EcgModel.duration
                                    rrIntervalChartCanvas.selectedRangeChange(start,duration)
                                }
                            }
                            //向右变大
                            MouseArea {
                                anchors.right: parent.right
                                height: parent.height
                                width : 5
                                // color:"Red"
                                cursorShape: Qt.SizeHorCursor

                                property real startX: 0
                                property bool running: false
                                onPressed: function(mouse)  {
                                    startX = mouse.x
                                    running = true
                                }
                                onPositionChanged:function (mouse) {
                                    if(running){
                                        var width = mouse.x - startX
                                        rrIntervalChartSelection.width = rrIntervalChartSelection.width + width
                                        if(rrIntervalChartSelection.x +rrIntervalChartSelection.width > rrIntervalChartMouseArea.width){
                                            rrIntervalChartSelection.width =rrIntervalChartMouseArea.width - rrIntervalChartSelection.x
                                        }
                                        if(rrIntervalChartSelection.width < 10){
                                            rrIntervalChartSelection.width = 10
                                        }
                                    }
                                }
                                onReleased: function (mouse){
                                    running = false
                                    let start = rrIntervalChartSelection.x / rrIntervalChartMouseArea.width * EcgModel.duration / 1000 * EcgModel.sampleRate
                                    let duration = rrIntervalChartSelection.width / rrIntervalChartMouseArea.width * EcgModel.duration
                                    rrIntervalChartCanvas.selectedRangeChange(start,duration)
                                }
                            }
                            Rectangle{
                                anchors.top: parent.top
                                anchors.right: parent.right
                                anchors.margins: 5
                                // border.color: "#666666"
                                // border.width: 1
                                radius:2
                                width: 16
                                height: 16
                                color: "#ffffff"
                                visible:rrIntervalChartSelection.width >= 25
                                Text {
                                    font.pixelSize: 14
                                    verticalAlignment: Text.AlignVCenter  // 垂直居中
                                    horizontalAlignment: Text.AlignHCenter  // 水平居中
                                    anchors.fill: parent
                                    text: "x"
                                    color: "#666666"
                                    focus: false
                                }
                                MouseArea{
                                  anchors.fill: parent
                                  cursorShape: Qt.PointingHandCursor
                                  onReleased: function (mouse){
                                      rrIntervalChartSelection.visible = false
                                      Qt.callLater(function() {
                                        rrIntervalChartCanvas.selectedRangeChange(0,0)
                                      })
                                  }
                                }
                            }

                        }
                    }
                }

                //边框
                //下
                Rectangle {
                    width: parent.width-15
                    height: 1
                    color: "#666666"
                    x:0
                    y:parent.height - 5
                }
                //上
                Rectangle {
                    width: parent.width-15
                    height: 1
                    color: "#666666"
                    x:0
                    y:5
                }
                //右
                Rectangle {
                    width: 1
                    height: parent.height-10
                    color: "#666666"
                    x:parent.width-15
                    y:5
                }
                //刻度线
                Repeater {
                    model:  24 // 重复次数
                    Rectangle {
                        width: 1
                        height: 6
                        color: "#666666"
                        y: parent.height - 5
                        x: (index+1)*(parent.width-15)/24
                    }
                }
                Component.onCompleted: {
                    rrIntervalChartCanvas.selectedRangeChange(0,0)
                }
            }
        }
    }
    //下部分时间刻度
    Rectangle{
        Layout.fillWidth : true
        Layout.preferredHeight:26
        Repeater {
            model:  25 // 重复次数
            Rectangle {
                width: 30
                height: parent.height
                // color: "#666666"
                y: 0
                x: 25 + index*(parent.width-40 - 15)/24
                Text {
                    text: Utils.formatTime(EcgModel.startTimeStamp + index * EcgModel.duration / 24/1000,"hh:mm")
                    width: parent.width
                    height: parent.height/2
                    font.pixelSize: 10
                    color: "#666666"
                    verticalAlignment: Text.AlignVCenter  // 垂直居中
                    horizontalAlignment: Text.AlignHCenter  // 水平右对齐
                }
                Text {
                    y:parent.height/2
                    text: qsTr(Utils.formatTime(EcgModel.startTimeStamp + index * EcgModel.duration / 24/1000,"MM/dd"))
                    width: parent.width
                    height: parent.height/2
                    font.pixelSize: 10
                    color: "#666666"
                    verticalAlignment: Text.AlignVCenter  // 垂直居中
                    horizontalAlignment: Text.AlignHCenter  // 水平右对齐
                }
            }
        }
    }
}
